<template>
  <el-descriptions class="margin-top" :column="2" border>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          <el-icon :style="iconStyle">
            <user />
          </el-icon>
          用户ID
        </div>
      </template>
      {{ userId }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          <el-icon :style="iconStyle">
            <user />
          </el-icon>
          用户名
        </div>
      </template>
      <el-input v-model="userName"></el-input>
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          <el-icon :style="iconStyle">
            <Cellphone />
          </el-icon>
          联系电话
        </div>
      </template>
      <el-input v-model="phone"></el-input>
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          <el-icon :style="iconStyle">
            <tickets />
          </el-icon>
          权限等级
        </div>
      </template>
      <el-tag v-if="admin">系统管理员</el-tag>
      <el-tag type="info" v-if="!admin">普通用户</el-tag>
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          <el-icon :style="iconStyle">
            <Timer />
          </el-icon>
          注册时间
        </div>
      </template>
      {{ createTime }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          <el-icon :style="iconStyle">
            <Timer />
          </el-icon>
          上次更新时间
        </div>
      </template>
      {{ updateTime }}
    </el-descriptions-item>
  </el-descriptions>
  <div id="buttons">
    <el-button type="primary" @click="getUserData">立即刷新</el-button>
    <el-button type="primary" @click="updateUserData">更新个人信息</el-button>
    <el-button type="primary" @click="updatePasswdVisible = true">修改登录密码</el-button>
  </div>

  <el-dialog title="修改登录密码🔏" v-model="updatePasswdVisible" width="20vw">
    <UpdatePasswd />
  </el-dialog>
</template>

<script>
import { show_success_msg, show_error_msg } from "../js/msg.js";
import { baseUrl } from "../main.js";
import axios from "axios";
import UpdatePasswd from "./updatePasswd.vue";
export default {
  components: {
    UpdatePasswd,
  },
  data() {
    return {
      baseUrl: baseUrl,
      updatePasswdVisible: false,
      userId: localStorage.userId,
      userName: localStorage.userName,
      phone: "13255555555",
      admin: localStorage.admin == "true",
      createTime: "",
      updateTime: "",
    };
  },
  methods: {
    getUserData() {
      axios
        .get(this.baseUrl + "/user/findById?id=" + this.userId)
        .then((response) => {
          let re_data = response.data;
          if (re_data.status == 200) {
            this.userName = re_data.data.name;
            this.phone = re_data.data.phone;
            this.admin = re_data.data.admin;
            this.createTime = new Date(
              re_data.data.createTime
            ).toLocaleString();
            let updateTime = re_data.data.updateTime;
            this.updateTime = updateTime == null ? "暂无更新" : new Date(
                updateTime
            ).toLocaleString();
            localStorage.setItem("admin", re_data.data.admin);
            localStorage.setItem("userName", re_data.data.name);
            show_success_msg("获取用户信息成功");
          } else {
            show_error_msg("获取用户信息失败", re_data.msg);
          }
        }).catch(error => {
            show_error_msg("读取失败", "与服务器通讯异常");
        });
    },
    updateUserData() {
      let fromdata = new FormData();
      fromdata.append("id", this.userId);
      fromdata.append("name", this.userName);
      fromdata.append("phone", this.phone);
      axios
        .post(this.baseUrl + "/user/updateUserInfo", fromdata)
        .then((response) => {
          let re_data = response.data;
          if (re_data.status == 200) {
            show_success_msg("更新用户信息成功", "");
            this.getUserData();
          } else {
            show_error_msg("更新用户信息失败", re_data.msg);
          }
        }).catch(error => {
            show_error_msg("更新失败", "与服务器通讯异常");
        });
    },
  },
  mounted() {
    this.getUserData();
  },
  created() {},
};
</script>

<style scoped>
#buttons {
  margin-top: 2vh;
}
#buttons > .el-button {
  width: 8vw;
}
</style>